// 生成类组件方式的快捷键 rce  在react中有两种组件，第一种，类组件，第二中 ，函数组件， 函数组件现在比较常用，类组件比较古老
// 类组件有完整的生命周期 有this指向问题
import React, { Component } from 'react'
import Myevents from "../utils/events"
import PropTypes from 'prop-types';
 class Appclass extends Component {
  state = {   // 在类组件中state存放状态
      name:"zhangsan",
      age:20
  }
  fn (name,age) {   // js 修改this指向 call apply     bind 
      console.log(name,age);
     this.setState({   // this.setState去修改状态
         name,
         age
     })

  }
  componentDidMount () { // 相当于vue mounted ，组件挂载完成
    Myevents.addListener("fn",(data)=>{
        console.log(data);
    })
  }
  render() {
      console.log(this.props,"props");
      let {send} = this.props
      let {name,age} = this.state
    return (
      <div>
          <h1>{send}</h1>
          <h4>{this.props.name222}</h4>
          <p>{name}{age}</p>
          <span>{this.state.name}</span> <span>{this.state.age}</span><button onClick={this.fn.bind(this,"麻子","30")}> 点击我修改name</button> </div>
    )
  }
}  
 // 父子组件传参的默认参数 // 考虑组件的健壮性

export default Appclass
Appclass.defaultProps = {
    name222:"我是子组件的默认数据"
}
Appclass.propTypes = {
    name222: PropTypes.any
  };
